import { StyleSheet, View } from 'react-native';
import { Svg, LinearGradient, Stop, Text } from 'react-native-svg';

interface GradientTextProps {
  text: string;
  width: number;
  height: number;
  fontSize?: number;
  fontWeight?: string;
  startColor?: string;
  endColor?: string;
}

const GradientText = (props: GradientTextProps) => {
  const {
    text,
    width,
    height,
    fontSize = 13,
    fontWeight = '400',
    startColor = 'rgba(30, 0, 255, 1)',
    endColor = 'rgba(255, 27, 240, 1)',
  } = props;

  // 计算文本的水平位置，使其在 SVG 内水平居中
  const textX = 0;

  // 计算文本的垂直位置，使其在 SVG 内垂直居中
  const textY = height / 2 + fontSize / 2.5; // 这里简单地假设文本的基线是在高度的中间位置向上点的位置

  const styles = StyleSheet.create({
    container: {
      width: width,
      height: height,
    },
  });
  // x1, y1 是起始点的坐标，x2, y2 是结束点的坐标，它们定义了渐变的方向。
  // x1="0" y1="0" 表示渐变的起始点在左上角，x2="1" y2="1" 表示渐变的结束点在右下角，
  // 这样会创建一个从左上到右下的线性渐变效果。

  return (
    <View style={styles.container}>
      <Svg height={'100%'} width={'100%'}>
        <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
          <Stop offset="0" stopColor={startColor} />
          <Stop offset="0.5" stopColor={'rgba(168, 38, 255, 1)'} />
          <Stop offset="1" stopColor={endColor} />
        </LinearGradient>
        <Text fill="url(#grad)" fontSize={fontSize} fontWeight={fontWeight} x={textX} y={textY}>
          {text}
        </Text>
      </Svg>
    </View>
  );
};

export default GradientText;
